<template>
  <div class="dashboard">
    <div>
      <div class="search">
        <div style="position: relative">
          <input
            v-model="input"
            placeholder="请输入想搜索的地区"
            type="text"
            class="input"
          />
          <div class="icon" @click="searchFn"></div>
        </div>
      </div>
      <el-carousel
        height="565px"
        trigger="click"
        autoplay
        arrow="always"
        :interval="5000"
      >
        <el-carousel-item v-for="list in list" :key="list.id">
          <img class="img" :src="list.url" alt="图片加载失败" />
        </el-carousel-item>
      </el-carousel>
      <!-- === -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { searchPropertie, getPropertieList } from "@/api/propertie";
export default {
  data() {
    return {
      input: "",
      list: [
        {
          id: 1,
          url: "https://hr-79-1313461851.cos.ap-guangzhou.myqcloud.com/12.jpg",
          desc: "阿萨德1",
        },
        {
          id: 2,
          url: "https://hr-79-1313461851.cos.ap-guangzhou.myqcloud.com/6.jpg",
          desc: "阿萨德2",
        },
        {
          id: 3,
          url: "https://hr-79-1313461851.cos.ap-guangzhou.myqcloud.com/3.jpg",
          desc: "阿萨德3",
        },
        {
          id: 4,
          url: "https://hr-79-1313461851.cos.ap-guangzhou.myqcloud.com//2.jpg",
          desc: "阿萨德",
        },
        {
          id: 5,
          url: "https://hr-79-1313461851.cos.ap-guangzhou.myqcloud.com//R-C.jpg",
          desc: "阿萨德",
        },
      ],
    };
  },
  methods: {
    async searchFn() {
      let keyWord = this.input;
      console.log(55, keyWord);
      // let res = await getPropertieList();
      let res = await searchPropertie(keyWord );
      console.log(68, res);
      await this.$router.push({ name: "list", query: { searchItem: res } });
    },
  },
};
</script>

<style lang="scss">
.dashboard {
  padding-top: 20px;
  width: 100%;
  //height: 100%;
  // position: relative;
  // background-color: #aaf;
  // margin-bottom: 50px;
  // background-image: url('@/assets/images/R-C.jpg');
  // background-size:cover;
  .search {
    // position: fixed;
    margin-top: 250px;
    left: 50%;
    transform: translate(-50%);
    // border-right: 10px;
    position: absolute;
    z-index: 999;
    .input {
      padding-left: 10px;
      font-size: 16px;
    }
    .icon {
      // margin-left: -25px;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      margin-right: 10px;
      width: 20px;
      height: 20px;
      background: url("@/assets/images/搜索.png");
      background-size: 100% 100%;
    }
  }
  input {
    height: 45px;
    width: 400px;
    border: none;
    outline: none;
    font-size: 18px;
    border-radius: 5px;
  }
}
.el-carousel {
  width: 100%;
  position: relative;
  margin-bottom: 0px;
  height: 100%;
}
.img {
  width: 100%;
  height: 600px;
}
.el-carousel__arrow {
  width: 50px;
  height: 50px;
}
</style>